<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="am-cf" id="danju">
    <span v-if="total==0">没有找到相关账单！！！</span>
    <span v-else>共 {{total}} 条记录</span>
    <div class="am-fr">
        <ul class="am-pagination" >
            <li><a href="javascript:void(0)" @click="qian()">«</a></li>
            <li><a href="javascript:void(0)" @click="chaxun(1,pageSize)">首页</a></li>
            <li v-for="num in navigatepageNums" :class="num==pageNum?'am-active':'asdf'"><a href="javascript:void(0)"  @click="chaxun(num,pageSize)">{{num}}</a></li>
            <li><a href="javascript:void(0)" @click="chaxun(pages,pageSize)"> 尾页</a></li>
            <li><a href="javascript:void(0)" @click="hou()">»</a></li>
        </ul>
    </div>
</div>

</body>
<script>


    var vm=new Vue({
        el:"#danju",
        data:{
            pageNum:0,
            pageSize:0,
            //总条数
            total:0,
            //总页数
            pages:0,
            isFirstPage:false,
            isLastPage:false,
            hasPreviousPage:false,
            hasNextPage:false,
            //所有导航页号
            navigatepageNums:[],
            list:[],
            //搜索框特查
            techa:"",
            //单据状态
            danjuzhuangtai:0,
            //收款账户
            shoukuanren:0,
            //buy_order某一订单详情
            dindanshow:"",

        },
        methods:{
            chaxun(pageNum,pageSize){
                // alert(this.danjuzhuangtai);
                axios.post("/finance/allreceipt_order",{"pageNun":pageNum,"pageSize":pageSize,"techa":this.techa,"receiptSta":this.danjuzhuangtai,"account":this.shoukuanren}).then(res=>{
                    this.list=res.data.obj.list;
                    this.pageNum=parseInt(res.data.obj.pageNum);
                    this.pageSize=parseInt(res.data.obj.pageSize);
                    this.total=parseInt(res.data.obj.total);
                    this.pages=parseInt(res.data.obj.pages);
                    this.isFirstPage=res.data.obj.isFirstPage;
                    this.isLastPage=res.data.obj.isLastPage;
                    this.hasPreviousPage=res.data.obj.hasPreviousPage;
                    this.hasNextPage=res.data.obj.hasNextPage;
                    this.navigatepageNums=res.data.obj.navigatepageNums;
                    // alert(this.pageNum)
                    // alert(this.list[0].id);
                }).catch(err=>{
                    alert("失败！")
                })
            },
            //上一页
            qian(){
                if(this.hasPreviousPage==true){
                    // alert("上一页")
                    //表示有上一页
                    this.chaxun(this.pageNum-1,this.pageSize);
                }
            },
            //下一页
            hou(){
                if(this.hasNextPage==true){
                    this.chaxun(this.pageNum+1,this.pageSize);
                }
            },
            //搜索框@click
            sousuo(){
                this.chaxun(this.pageNum,this.pageSize);
            },
            //点击单据状态选择后或者收款账户框@change
            dianjidanju(){

                // alert(this.danjuzhuangtai);
                this.chaxun(this.pageNum,this.pageSize);
            },
            //关联订单
            kaishi(id){
                // alert(id);
                //用ajax查询其对应的订单内容
                axios.get("/finance/selectbuy_order",{params:{code:id}}).then(res=>{
                    this.dindanshow=res.data.obj;
                    // alert(this.dindanshow.id)
                }).catch(err=>{
                    alert("失败！")
                });
                $("#danhao").html(id);
                $('#my-confirm0').modal({
                    relatedElement: this
                });
            }

        },
        mounted () { //这个属性就可以，在里面声明初始化时要调用的方法即可
            // we can implement any method here like
            this.chaxun(1,15);
        }
    })


</script>
</html>